<template>
  <main>
    <van-form ref="form">
      <!-- 通过 pattern 进行正则校验 -->
      <div class="mainInput">
        <select name="" id="">
          <option value="">+86</option>
          <option value="">+886</option>
          <option value="">+852</option>
          <option value="">+853</option>
        </select>
        <van-field
          v-model="mobile"
          name="mobile"
          placeholder="输入手机号/邮箱"
          :rules="telRules"
        />
      </div>
      <div class="mainInput">
        <van-field
          v-model="pass"
          name="pass"
          type="password"
          placeholder="输入密码,必须包含三种字符,8-16位"
          :rules="passRules"
        />
      </div>
      <div class="mainBtn">
        <van-button type="primary" block @click="submit"
          >进入你今天真好看</van-button
        >
      </div>
    </van-form>
    <!-- 主体底部 -->
    <div class="mainBottom">
      <p>快速注册</p>
      <p>忘记密码</p>
    </div>
  </main>
</template>

<script>
// 引入表单vant组件
import { Form } from "vant";
import { Field } from "vant";
import { Button } from "vant";
import "vant/es/form/style";
import "vant/es/field/style";
// import { Toast } from "vant";
export default {
  data() {
    return {
      mobile: "", // 手机号码
      pass: "", // 验证码
      flag: true,
      // pattern: /\d{6}/,
      // 校验手机号码
      telRules: [
        {
          required: true,
          message: "手机号码不能为空",
          trigger: "onBlur",
          flag: false,
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
              value
            );
          },
          message: "请输入正确格式的手机号码",
          trigger: "onBlur",
          flag: false,
        },
      ],
      passRules: [
        {
          required: true,
          message: "密码不能为空",
          trigger: "onBlur",
          flag: false,
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^[A-Za-z0-9]{8,16}$/.test(value);
          },
          message: "至少8-16个字符,字母数字都需要",
          trigger: "onBlur",
          flag: false,
        },
      ],
    };
  },
  methods: {
    submit() {
      // 全局表单验证
      if (this.flag) {
        this.$router.replace("/home/index");
      } else {
        alert("请输入正确的信息");
      }
    },
  },

  components: {
    VanForm: Form,
    VanField: Field,
    VanButton: Button,
  },
};
</script>

<style lang="less" scoped>
main {
  width: 80%;
  margin: auto;
  select {
    border: 0;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #605e62;
    background-color: white;
    option {
      background-color: white;
      color: turquoise;
    }
  }
  .mainInput {
    width: 100%;
    height: 92px;
    border: 1px solid #605e62;
    border-radius: 10px;
    margin-top: 30px;
    display: flex;
    align-items: center;
  }
  .mainBtn {
    margin-top: 60px;
    width: 100%;
    height: 92px;
    background: #68dcdc;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  :deep(.van-button) {
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    background-color: transparent;
    border: 0;
    width: 100%;
    height: 100%;
  }
  .mainBottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    p {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #504e52;
      padding: 30px 32px;
    }
  }
}
:deep(.van-field__control) {
  width: 470px;
  height: 40px;
  font-size: 30px;
  background-color: transparent;
}
:deep(.van-field__error-message) {
  font-size: 12px;
}
</style>
